<template>
  <div class="photoInfo_container">
    <!-- 头部标题部分 -->
    <h2>{{photoInfo.title}}</h2>
    <p class="subtitle">
      <span>发布时间:{{photoInfo.add_time}}</span>
      <span>点击：{{photoInfo.click}}次</span>
    </p>
    <hr />
    <!-- 图片缩略图区域-->
    <vue-preview :slides="slide1" @close="handleClose" >
    </vue-preview>
    <!--  图片内容-->
    <div class="content" v-html="photoInfo.content"></div>
    <!-- 图片评论 -->
    <cmt-box :id="id"></cmt-box>
  </div>
</template>
<script>
import comment from '../subcomponents/comment.vue'
export default {
  data () {
    return {
      id: this.$route.params.id, // 这是从路由获取的图片ID
      photoInfo: [], // 这是图片详情
      slide1: []
    }
  },
  created () {
    this.getPhotoInfo()
    this.getThumbs()
  },
  methods: {
    getPhotoInfo () {
      this.$http.get('api/getimageInfo/' + this.id).then(result => {
        if (result.body.status === 0) {
          this.photoInfo = result.body.message[0]
        }
      })
    },
    handleClose () {},
    getThumbs () {
      this.$http.get('api/getthumimages/' + this.id).then(result => {
        if (result.body.status === 0) {
          result.body.message.forEach((item, index) => {
            item.w = 600
            item.h = 400
            item.title = 'image ' + (index + 1)
            item.src = result.body.message[index].src
            item.msrc = result.body.message[index].src
          })
          this.slide1 = result.body.message
          console.log(result.body.message[0].src)
        }
      })
    }
  },
  components: {
    // eslint-disable-next-line vue/no-unused-components
    'cmt-box': comment
  }
}
</script>
<style lang="css">
.photoInfo_container {
  padding: 3px;
}
.photoInfo_container h2 {
  color: #26a2ff;
  font-size: 15px;
  text-align: center;
  line-height: 15px;
}
.photoInfo_container .subtitle {
  display: flex;
  justify-content: space-between;
  font-size: 13px;
}
.photoInfo_container .content {
  font-size: 13px;
  line-height: 30px;
}
.photoInfo_container hr {
  margin: 5px 0;
}
.my-gallery {
   display: flex;
   justify-content: flex-start;
   flex-wrap: wrap;

}
.my-gallery figure{
  display: inline-block;
  margin: 8px;
}
.my-gallery img{
  width: 100px;
  height: 70px;
}
</style>
